<template>
<div class="mine-wrap">

    <div class="header">
        <div class="topbar">
            <van-image v-if="isload" round width="4.2rem" height="4.2rem" style="border: 2px solid white;vertical-align:middle" @click="getMineEditInfo" :src="userInfo.avatar || avatar " />
            <div class="topbar-info">
                <div>
                    <router-link to="mine/member">
                        <span style="max-width: 80px; color:white;font-size: 17px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;" v-if="isload">{{ userInfo.nickname == '昵称' ? userInfo.nickname +' ' + userInfo.id   :  userInfo.nickname }}</span>
                        <span class="topbar-info-span" v-if="isload">{{ roleName }}</span>
                        <span class="topbar-info-span">升级</span>
                    </router-link>
                </div>
                <div class="topbar-info-vip" v-if="userInfo.vip">
                    <div>
                        <svg class="icon" aria-hidden="true" style="font-size: 1.5rem">
                            <use xlink:href="#icon-VIP"></use>
                        </svg>
                        <span style="font-size: 14px;">秒抢VIP</span>
                    </div>
                    <div>
                        <span style="color: white;font-size: 12px;padding-top: .3rem;">到期时间 : {{ userInfo.vip.end_at }}</span>
                    </div>
                </div>
                <div class="topbar-info-vip" v-else>
                    <div>
                        <svg class="icon" aria-hidden="true" style="font-size: 1.5rem">
                            <use xlink:href="#icon-icon-"></use>
                        </svg>
                        <span style="font-size: 14px;">秒抢VIP</span>
                    </div>
                    <div>
                        <span style="color: white;font-size: 14px;padding-top: .3rem;">不是VIP用户</span>
                    </div>
                </div>
                <div>
                </div>
            </div>
        </div>
        <div>
            <van-row class="header-text">
                <van-col span="6">
                    <router-link to="/mine/team">
                        <p class="money">0</p>
                        <p>分享人数</p>
                    </router-link>
                </van-col>
                <van-col span="6">
                    <router-link to="/drawApply">
                        <p class="money" v-if="isload">{{ userInfo.account.money }}</p>
                        <p>余额</p>
                    </router-link>
                </van-col>
                <van-col span="6">
                    <router-link to="/integral">
                        <p class="money" v-if="isload">{{ userInfo.account.integral }}</p>
                        <p>积分</p>
                    </router-link>
                </van-col>
                <van-col span="6">
                    <router-link to="mine/distribution">
                        <p class="money" v-if="isload">{{ userInfo.account.bonus }}</p>
                        <p>奖金</p>
                    </router-link>
                </van-col>

            </van-row>
        </div>
    </div>

    <div class="item-wrap">
        <!-- start 我的订单 -->
        <div class="plank">
            <router-link :to="{name:'order',params:{'index': 0}}">
                <div class="plank-header">
                    <div class="plank-header-title clearfix">
                        <div class="l" style="font-weight: 700;">全部订单</div>
                        <div class="r">
                            <van-icon name="arrow" />
                        </div>
                    </div>
                </div>
            </router-link>

            <div class="plank-container">
                <div class="plank-container-item" v-for=" (item,index) in orderDataNav" :key="index">
                    <router-link :to="{name:'order',params:{'index': index+1}}">
                        <svg class="icon closeImg" aria-hidden="true" style="font-size: 30px;">
                            <use :xlink:href="item.icon"></use>
                        </svg>
                        <p>{{ item.title }}</p>
                    </router-link>
                </div>
            </div>
        </div>
        <!-- end 我的订单 -->
        <!-- start 我的工具 -->
        <div class="download fixed">
            <router-link to="mine/download">
                在APP打开
                <van-icon name="arrow" style="vertical-align: sub;" size="16px" />
            </router-link>
        </div>
        <van-cell-group title="上级分店" v-if="userInfo.parent && userInfo.parent.stores" style="padding: .5rem 0">
        <van-row>
            <van-col span="2" offset="1">
                <van-image
                round
                width="2rem"
                height="2rem"
                :src="userInfo.parent.stores.avatar || 'https://img.yzcdn.cn/vant/cat.jpeg'"
                />
            </van-col>
            <van-col span="21"> <span style="line-height: 30px;">{{ userInfo.parent.stores.title }}</span> </van-col>
                </van-row>
        </van-cell-group>
        <van-cell-group  title="系统功能">
            <van-cell title="分销中心" value="进入" to="mine/distribution" is-link>
                <svg slot="icon" class="icon closeImg" aria-hidden="true" style="font-size: 22px;margin-right: 4px;">
                    <use xlink:href="#icon-peixunfei"></use>
                </svg>
            </van-cell>
            <van-cell title="资金明细" value="查看" :to="{ name:'minefunds', params:{id:userInfo.id}}" is-link>
                <svg slot="icon" class="icon closeImg" aria-hidden="true" style="font-size: 22px;margin-right: 4px;">
                    <use xlink:href="#icon-jizhangleibiaodan"></use>
                </svg>
            </van-cell>
            <van-cell title="我的地址" value="查看" to="/address/list" is-link>
                <svg slot="icon" class="icon closeImg" aria-hidden="true" style="font-size: 22px;margin-right: 4px;">
                    <use xlink:href="#icon-svg-10"></use>
                </svg>
            </van-cell>
            <van-cell title="我的秒抢" value="查看" to="/seckill/mine" is-link>
                <svg slot="icon" class="icon closeImg" aria-hidden="true" style="font-size: 22px;margin-right: 4px;">
                    <use xlink:href="#icon-liuchengshenpi1"></use>
                </svg>
            </van-cell>
            <van-cell title="我的卡券" value="查看" to="/coupon" is-link>
                <svg slot="icon" class="icon closeImg" aria-hidden="true" style="font-size: 22px;margin-right: 4px;">
                    <use xlink:href="#icon-svg-6"></use>
                </svg>
            </van-cell>
            <van-cell title="会员升级" value="查看" to="/mine/member" is-link>
                <svg slot="icon" class="icon closeImg" aria-hidden="true" style="font-size: 22px;margin-right: 4px;">
                    <use xlink:href="#icon-VIP"></use>
                </svg>
            </van-cell>

            <van-cell title="我的关注" value="查看" to="/mine/attention" is-link>
                <svg slot="icon" class="icon closeImg" aria-hidden="true" style="font-size: 22px;margin-right: 4px;">
                    <use xlink:href="#icon-tongyongbaoxiaobiaodan"></use>
                </svg>
            </van-cell>

            <van-cell title="我的收藏" value="查看" to="/mine/collect" is-link>
                <svg slot="icon" class="icon closeImg" aria-hidden="true" style="font-size: 22px;margin-right: 4px;">
                    <use xlink:href="#icon-gongyingshangfeiyongshenqingbiaodan"></use>
                </svg>
            </van-cell>
            <van-cell title="成为店长" value="去支付" @click="upstores" is-link v-if="userInfo.parent && userInfo.parent.stores && userInfo.parent.stores.vip && userInfo.roles.length == 1  ">
                <svg slot="icon" class="icon closeImg" aria-hidden="true" style="font-size: 22px;margin-right: 4px;">
                    <use xlink:href="#icon-fendianchang"></use>
                </svg>
            </van-cell>
            <!-- <van-cell title="分享" value="查看" to="drawApply/share" is-link />  -->
            <van-cell title="商家中心" value="进入" @click="getStore" is-link>
                <svg slot="icon" class="icon closeImg" aria-hidden="true" style="font-size: 22px;margin-right: 4px;">
                    <use xlink:href="#icon-tongxunfei"></use>
                </svg>
            </van-cell>
            <van-cell title="公司介绍" value="进入" :to="{path:'/mine/firm'}" is-link>
                <svg slot="icon" class="icon closeImg" aria-hidden="true" style="font-size: 22px;margin-right: 4px;">
                    <use xlink:href="#icon-wanchengshoukuangongzuotai1"></use>
                </svg>
            </van-cell>
            <van-cell title="版本型号" value="V1.0.1">
                <svg slot="icon" class="icon closeImg" aria-hidden="true" style="font-size: 22px;margin-right: 4px;">
                    <use xlink:href="#icon-shoukuanfenlei1"></use>
                </svg>
            </van-cell>
        </van-cell-group>

        <copyright />
        <!-- end 我的工具 -->
    </div>

    <c-footer></c-footer>
</div>
</template>

<script>
import {
    Toast,
    Dialog
} from 'vant';
import wx from 'weixin-js-sdk'
import {
    mapState
} from 'vuex'
import assets from "assets/img/bg.png";
export default {
    name: "Mine",
    data() {
        return {
            is_vip: true,
            userInfo: {},
            isload: false,
            bgImage: assets,
            avatar: "https://img.yzcdn.cn/vant/cat.jpeg",
            orderDataNav: [{
                    title: "待付款",
                    icon: "#icon-shengchengfapiaojiankong"
                },
                {
                    title: "待发货",
                    icon: "#icon-wanchengshoukuangongzuotai"
                },
                {
                    title: "待收货",
                    icon: "#icon-fapiaoguanlixitong"
                },
                {
                    title: "待评价",
                    icon: "#icon-yingxiangdaiban"
                },
                {
                    title: "待退款",
                    icon: "#icon-chunafukuan"
                }
            ],
            roleName: ''
        };
    },
    created() {
        this.getUserInfo()
    },
    methods: {
        getUserInfo() {
            let params = {
                token: sessionStorage.getItem("token")
            };
            this.axios.get('/api/wechatofficial/mine', {
                    params
                }).then(result => {
                    this.userInfo = result.data.data;
                    this.global.state.userInfo = this.userInfo;
                    this.global.state.storeInfo = this.userInfo.stores;
                    this.isload = true;
                    this.getRole(this.userInfo.roles);
                })
                .catch(error => {
                    console.log(error)
                });
            if (this.userInfo.avatar != undefined) {
                this.avatar = this.userInfo.avatar;
            }
        },
        getRole(roles) {
            for (let index = 0; index < roles.length; index++) {
                this.roleName = roles[index].title;
                if (roles[index].name == 'clerk') {
                    this.roleName = roles[index].title
                    break;
                }
            }
        },
        getStore() {
            if (this.userInfo.stores == null) {
                this.$router.push({
                    path: '/store/entering',
                    query: {
                        'type': 1
                    }
                })
            } else {
                switch (this.userInfo.stores.status) {
                    case 'Apply':
                        this.$router.push({
                            path: '/store/enteringFail',
                            query: {
                                'type': 0
                            }
                        })
                        break;
                    case 'Normal':
                        // this.$router.push({ path: '/store/mine/', query: { 'type': 2 }})
                        this.$router.push({
                            path: '/store/mine/merchant',
                            query: {
                                'type': 2
                            }
                        })
                        break;
                    case 'Reject':
                        this.$router.push({
                            path: '/store/entering',
                            query: {
                                'type': 3
                            }
                        })
                        break;
                    default:
                        this.$router.push({
                            path: '/store/entering',
                            query: {
                                'type': 4
                            }
                        })
                        break;
                }
            }
        },
        getMineEditInfo() {
            this.$router.push({
                name: 'mineEditInfo',
                path: './editInfo'
            })
        },
        upstores() {
            let params = {
                token: sessionStorage.getItem("token")
            };
            this.axios.get('/api/store/user/clerk/wechat', {
                    params
                }).then(result => {
                    this.wxPay(result.data.data);
                })
                .catch(error => {
                    console.log(error)
                });
        },
        wxPay(data) {
            let _this = this;
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.appId, // 必填，公众号的唯一标识
                timestamp: data.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.nonceStr, // 必填，生成签名的随机串
                signature: data.signature, // 必填，签名，见附录1
                jsApiList: ['chooseWXPay'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
            wx.ready(function () {
                wx.chooseWXPay({
                    timestamp: data.timestamp, // 支付签名时间戳，注意微信jssdk中的所有使用timestamp字段均为小写。但最新版的支付后台生成签名使用的timeStamp字段名需大写其中的S字符
                    nonceStr: data.nonceStr, // 支付签名随机串，不长于 32 位
                    package: data.package, // 统一支付接口返回的prepay_id参数值，提交格式如：prepay_id=***）
                    signType: 'MD5', // 签名方式，默认为'SHA1'，使用新版支付需传入'MD5'
                    paySign: data.paySign, // 支付签名
                    success: function (res) {
                        // 支付成功后的回调函数
                        if (res.errMsg == "chooseWXPay:ok") {
                            Dialog({
                                message: '支付成功'
                            });
                            _this.getUserInfo()
                        } else {
                            Dialog({
                                message: '错误'
                            });
                        }
                    },
                    error: function () {
                        Dialog({
                            message: '支付失败'
                        });
                    },
                    cancel: function () {
                        Dialog({
                            message: '取消支付'
                        });
                    }
                });
            });
        }
    },
    filters: {
        roles(value) {
            return value[value.length - 1].title
        }
    }
}
</script>

<style scoped>
.mine-wrap {
    position: relative;
}

.header {
    background-color: rgba(34, 34, 34, 1);
    color: white;
    padding: 10px 15px;
}

.header-text {
    margin: 1.98rem 0 0 0;
    border-radius: 4px 4px 0 0;
    text-align: center;
    color: rgb(125, 91, 56);
    background-color: rgba(227, 200, 153, 1);
}

.header-text p {
    margin: .5rem 0;
}

.header p.money {
    font-weight: 800;
}

.item-wrap {
    position: absolute;
    top: 150px;
    left: 2%;
    right: 2%;
    width: 96%;
    margin: 0;
    padding-bottom: 60px;
}

.plank {
    border-radius: 4px;
}

.plank .plank-header {
    height: 44px;
    line-height: 44px;
    border-bottom: 1px solid rgba(170, 170, 170, 0.3);
}

.plank-container .plank-container-item {
    display: inline-block;
    text-align: center;
    width: 20%;
    margin: .75rem 0;
}

.plank-container .plank-container-item p {
    margin: 0;
}

.download {
    right: 0;
    top: 1vh;
    background-color: rgb(249, 63, 36);
    z-index: 3;
    padding: 0 0 0 10px;
    line-height: 35px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

.download a {
    color: white;
}

.topbar {
    display: grid;
    grid-template-columns: 70px 1fr;
}

.topbar-info {
    display: grid;
    grid-template-rows: 1fr 20px;
    padding: 3px 0;
}

.topbar-info div .topbar-info-span {
    font-size: 10px;
    margin-left: 5px;
    background: rgba(227, 200, 153, 1);
    padding: 3px 5px;
    border-radius: 2px;
    color: rgb(125, 91, 56);
}

.topbar .topbar-info .topbar-info-vip {
    display: grid;
    grid-template-columns: 2fr 4fr;
}
</style>
